<template>
  <div class="bottomBar">
    <div class="left">
      <div class="leftItem">
        <div class="item1"></div>
        <p>客服</p>
      </div>
      <div class="leftItem">
        <div class="item2"></div>
        <p>店铺</p>
      </div>
      <div class="leftItem">
        <div class="item3"></div>
        <p>收藏</p>
      </div>
    </div>
    <div class="right">
      <p @click = "addToCart">加入购物车</p>
      <div>购买</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      
    }
  },
  methods:{
    addToCart(){
      this.$emit('addToCart')  
    }
  }
};
</script>

<style scoped>
.bottomBar {
  width:100%;
  height: 49px;
  box-shadow: 0 1px 1px #eee;
  background-color: #fff;
  display: flex;
  text-align: center;
}
.bottomBar .left {
  display: flex;
  width: 45%;
}
.bottomBar .left .leftItem {
  flex: 1;
  font-size: 13px;
}
.bottomBar .left .leftItem div {
  width: 100%;
  height: 32px;
  background: url('~assets/img/Details/detail_bottom.png') no-repeat;
  background-size: 50%;
}
.bottomBar .left .leftItem div.item1 {
  background-position: 50% 40%;
}
.bottomBar .left .leftItem div.item2 {
  background-position: 50% 77%;
}
.bottomBar .left .leftItem div.item3 {
  background-position: 50% 19%;
}
.bottomBar .right {
  width: 55%;
  display: flex;
  line-height: 49px;
}
.bottomBar .right p {
  background-color: rgb(255, 221, 15);
  float: left;
  flex:0 1 55%;
}
.bottomBar .right div {
  background-color: rgb(255, 119, 155);
  color: #fff;
  float: right;
  flex:0 1 45%;
}
</style>